<template>
    <div class="list-item">
        <!-- 通知消息 -->
        <template v-if="type == 1">
            <div class="notice">
                <div class="top">
                    <text class="title">您的{{sourceTypeName}}{{data.remark.status == 1 ? '已审核通过' : '被驳回'}}</text>
                    <text class="time">{{data.createTime}}</text>
                </div>
                <div class="remark" v-if="data.remark.status == 0">驳回理由：{{data.remark.reason}}</div>
            </div>
        </template>

        <!-- 评论消息 -->
        <template v-if="type == 2">
            <div class="comment" @click="toDetail">
                <div class="avatar default" v-if="!data.avatar">
                    <image class="icon-avatar" src="@/static/mine_default_avatar.png"></image>
                </div>
                <image v-else class="avatar" alt="" :src="data.avatar"></image>
                <div class="right">
                    <div class="user">
                        <text class="name">{{data.name}}</text>
                        <div>
                            <text class="time">{{data.createTime}}</text>
                            <text class="desc">{{data.sourceType == 4 ? '回复' : '评论'}}了你的{{sourceTypeName}}</text>
                        </div>
                    </div>
                    <div class="content" v-if="data.remark">{{data.remark.content}}</div>
                    <div class="content del" v-else>该评论已删除</div>
                </div>
            </div>
        </template>

        <!-- 点赞消息 -->
        <template v-if="type == 3">
            <div class="comment">
                <div class="avatar default" v-if="!data.avatar">
                    <image class="icon-avatar" src="@/static/mine_default_avatar.png"></image>
                </div>
                <image v-else class="avatar" alt="" :src="data.avatar"></image>
                <div class="right">
                    <div class="user">
                        <text class="name">{{data.name}}</text>
                        <div>
                            <text class="time">{{data.createTime}}</text>
                            <text class="desc">赞了你的{{sourceTypeName}}</text>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </div>
</template>

<script>
    export default {
        props: {
            type: { // 列表类型 1=系统通知，2=评论通知，3=点赞通知
                default: 1,
                type: Number | String
            },
            data: {
                type: Object,
                default: () => ({})
            }
        },
        computed: {
            // 消息类型转换
            sourceTypeName(){
                const textMap = {
                    1: '口语回忆',
                    2: '机考回忆',
                    3: '笔试回忆',
                    4: '评论',
                }
                return textMap[this.data.sourceType]
            }
        },
        methods: {
            toDetail(){
                const { recallType, mainId, remark } = this.data
                if(remark && remark.status == 0){
                    return this.$tip.toast(remark.reason)
                }
                if(mainId){
                    uni.navigateTo({
                        url: `/pages/memory/detail/index?type=${recallType}&id=${mainId}`
                    })
                }
            }
        },
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
    @function toRem($rpx){  //$rpx为需要转换的字号
        @return #{$rpx * 100 / 750 / 4}rem; 
    }
    .list-item{
        background-color: #fff;
        border-radius: toRem(10);
        margin-bottom: toRem(20);
        padding: toRem(30);
        box-sizing: border-box;
        .notice{
            color: #999;
            font-size: toRem(24);
            .top{
                display: flex;
                align-items: center;
                justify-content: space-between;
                .title{
                    color: #333;
                    font-size: toRem(28);
                }
            }
            .remark{
                margin-top: toRem(30);
            }
        }
        .comment{
            display: flex;
            align-items: flex-start;
            .avatar{
                width: toRem(70);
                height: toRem(70);
                border-radius: 50%;
            }
            .default{
                background-color: #EAEEF6;
                position: relative;
                
            }
            .icon-avatar{
                width: toRem(29);
                height: toRem(33);
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);
            }
            .right{
                margin-left: toRem(20);
                flex: 1;
                .user{
                    color: #999;
                    font-size: toRem(24);
                    .name{
                        color: #333;
                        margin-bottom: toRem(9);
                        display: inline-block;
                    }
                    .desc{
                        margin-left: toRem(20);
                    }
                }
                .content{
                    font-size: toRem(28);
                    color: #333;
                    line-height: toRem(36);
                    display: -webkit-box;
                    -webkit-line-clamp: 2;
                    -webkit-box-orient: vertical;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin-top: toRem(19);
                }
                .del{
                    color: #999;
                }
            }

        }
    }
 
</style>

